<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/lib/layui-v2.6.3/css/layui.css">
    <link rel="stylesheet" href="/lib/public.css" media="all">
    <link rel="stylesheet" href="/lib/wangeditor/css/style.css">
    <style>
        #editor—wrapper {
            border: 1px solid #ccc;
            z-index: 100; /* 按需定义 */
        }
        #toolbar-container { border-bottom: 1px solid #ccc; }
        #editor-container { height: 200px; }
    </style>
</head>
<body>

<div class="layuimini-container">
    <div class="layuimini-main">

        <form class="layui-form" action="">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">一级类别</label>
                    <div class="layui-input-block">
                        <select name="parentId" id="all_parent_select" lay-filter="all_parent_select" lay-verify="required">
                        </select>
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label">二级类别</label>
                    <div class="layui-input-block">
                        <select name="categoryId" id="all_child_select" lay-verify="required">
                        </select>
                    </div>
                </div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label">商品名称</label>
                <div class="layui-input-block">
                    <input type="text" name="name" required  lay-verify="required" placeholder="请输入商品名称" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">商品描述</label>
                <div class="layui-input-block">
                    <input type="text" name="dscp" required  lay-verify="required" placeholder="请输入商品描述" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">商品价格</label>
                <div class="layui-input-block">
                    <input type="text" name="price" required  lay-verify="required" placeholder="请输入商品价格" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">商品标价</label>
                <div class="layui-input-block">
                    <input type="text" name="markPrice" required  lay-verify="required" placeholder="请输入商品标价" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">商品颜色</label>
                <div class="layui-input-block">
                    <input type="text" name="color" required   placeholder="请输入商品颜色" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">商品配置</label>
                <div class="layui-input-block">
                    <input type="text" name="version" required   placeholder="请输入商品配置" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">商品数量</label>
                <div class="layui-input-block">
                    <input type="text" name="count" required  lay-verify="required" placeholder="请输入商品数量" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">商品图片</label>
                <div class="layui-input-block">
                    <div class="layui-upload">
                        <button type="button" class="layui-btn" id="uploadBtn">多图片上传</button>
                        <button type="button" class="layui-btn" id="reloadBtn">重置图片</button>
                        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                            预览图：
                            <div class="layui-upload-list" id="demo2"></div>
                        </blockquote>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">商品内容</label>
                <div class="layui-input-block">
                    <div id="editor—wrapper">
                        <div id="toolbar-container"><!-- 工具栏 --></div>
                        <div id="editor-container"><!-- 编辑器 --></div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">是否推荐</label>
                <div class="layui-input-block">
                    <input type="radio" name="recom" value="0" title="不推荐" checked>
                    <input type="radio" name="recom" value="1" title="推荐" >
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">是否上架</label>
                <div class="layui-input-block">
                    <input type="radio" name="status" value="1" title="不上架" checked>
                    <input type="radio" name="status" value="0" title="上架" >
                </div>
            </div>
            <input type="hidden" name="id" >
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>

    </div>
</div>

<script src="/lib/layui-v2.6.3/layui.js"></script>
<script src="/lib/wangeditor/index.js" ></script>
<script id="all_parent" type="text/html">
    <option value="0">--请选择父分类--</option>
    {{#  layui.each(d.data, function(index, item){ }}
    <option value="{{item.id}}">{{item.name}}</option>
    {{#  }); }}
</script>
<script id="all_child" type="text/html">
    {{#  layui.each(d.data, function(index, item){ }}
    <option value="{{item.id}}">{{item.name}}</option>
    {{#  }); }}
</script>
<script>
    //Demo
    layui.use(['form','laytpl','upload', 'element', 'layer'], function(){
        var form = layui.form,
            $=layui.$,
            laytpl=layui.laytpl,
            upload = layui.upload,
            element = layui.element,
            layer = layui.layer;



        //下拉框
        $.ajax({
            url:"/api/category",
            type:"GET",
            dataType:"JSON",
            success:function (resp) {
                console.log(resp);
                let tpl = $("#all_parent").html();
                laytpl(tpl).render(resp, function(html) {
                    $("#all_parent_select").html(html);
                });
                form.render();

                let id = sessionStorage.getItem("id");
                $.ajax({
                    url:`/api/goods/${id}`,
                    type:"GET",
                    dataType:"JSON",
                    success:function (resp) {
                        /*layer.msg(resp);*/
                        let data = resp.data;
                        console.log(data);
                        $("input[name='id']").val(data.id);
                        $("input[name='name']").val(data.name);
                        $("input[name='dscp']").val(data.dscp);
                        $("input[name='price']").val(data.price);
                        $("input[name='markPrice']").val(data.markPrice);
                        $("input[name='color']").val(data.color);
                        $("input[name='version']").val(data.version);
                        $("input[name='count']").val(data.count);
                        /*$("input[name='content']").val(data.content);*/
                        editor.setHtml(data.content);
                        for (let i=0;i<data.picList.length; i++){
                            $('#demo2').append('<img style="width: 95px;height: 95px; margin-right: 2px" src="'+ `/upload/${data.picList[i].url}` +'" >')
                            let pic = {url: data.picList[i].url};
                            picList.push(pic);
                        }
                        element.progress('demo','100%');
                        $(`#all_parent_select option[value=${data.category.parent.id}]`).attr("selected",true);
                        $.ajax({
                            url:`/api/category/page`,
                            type:"GET",
                            data: {parentId: data.category.parent.id},
                            dataType: "JSON",
                            success: function (resp) {
                                let tpl = $("#all_child").html();
                                laytpl(tpl).render(resp, function(html) {
                                    $("#all_child_select").html(html);
                                    $(`#all_child_select option[value=${data.category.id}]`).attr("selected",true);
                                });
                                form.render();
                            }
                        })
                        $(`input[type='radio'][name=recom][value='${data.recom}']`).attr("checked",true);
                        $(`input[type='radio'][name=status][value='${data.status}']`).attr("checked",true);

                        form.render();
                    }
                })
            }

        })


        form.on('select(all_parent_select)', function(data){
            console.log(data.value); //得到select原始DOM对象
            $.ajax({
                url:`/api/category/page`,
                type:"GET",
                data: {parentId: data.value},
                dataType: "JSON",
                success: function (resp) {
                    let tpl = $("#all_child").html();
                    laytpl(tpl).render(resp, function(html) {
                        $("#all_child_select").html(html);
                    });
                    form.render();
                }
            })
        });


        //常规使用 - 普通图片上传
        let picList = new Array();
        var uploadInst = upload.render({
            elem: '#uploadBtn'
            ,url: '/api/pic/upload' //此处配置你自己的上传接口即可
            ,multiple: true
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo2').append('<img style="width: 95px;height: 95px; margin-right: 2px" src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
                });
            }
            ,done: function(res){
                console.log(res);
                let pic = {url: res.data};
                picList.push(pic);
            }
            //进度条
            ,progress: function(n, elem, e){
                element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
                if(n == 100){
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });
        
        $("#reloadBtn").click(function () {
            $('#demo2').empty();
            picList = new Array();
        })

        //提交
        form.on('submit(formDemo)', function(data){
            data.field.picList=picList;
            let html = editor.getHtml();
            data.field.content = html;
            console.log(JSON.stringify(data.field));
            $.ajax({
                url:"/api/goods",
                type: "PUT",
                data: JSON.stringify(data.field),
                contentType:"application/json;charset=UTF-8",
                dataType: "JSON",
                success: function (resp){
                    layer.msg(resp.msg,{time: 1000},function (){
                        if (resp.code === 10000){
                            parent.layer.closeAll("iframe");
                        }
                    })

                }
            })
            return false;
        });

        //富文本编辑器
        const { createEditor, createToolbar } = window.wangEditor

        const editorConfig = {
            placeholder: 'Type here...',
        }

        const editor = createEditor({
            selector: '#editor-container',
            html: '<p><br></p>',
            config: editorConfig,
            mode: 'default', // or 'simple'
        })

        const toolbarConfig = {}

        const toolbar = createToolbar({
            editor,
            selector: '#toolbar-container',
            config: toolbarConfig,
            mode: 'default', // or 'simple'
        })

        form.render();
    });
</script>
</body>
</html>